<template>
    <view class="overall">
       
        <view class="content">

            <view class="manifest" v-for="(item, index) in defaultInfo" :key="index" @click="handleClick(item.card)">
                <view>
                    <view>
                        <view>{{item.nickname}} （{{item.relationship}}）</view>
                        <view class="default" v-if="item.status==1?true:false">默认</view>
                    </view>
                    <view>身份证号：{{item.code}}</view>
                    <view>就诊卡号：{{item.card}}</view>
                </view>
                <view>
                    <wd-icon name="arrow-right" size="22px"></wd-icon>
                </view>
            </view>
            
            <!-- 原生实现：暂无默认就诊人提示 -->
            <view class="empty-tip" v-if="defaultInfo.length === 0">
                <view class="empty-image">
                    <image src="/static/images/empty_default.png" mode="aspectFit" />
                </view>
                <view class="empty-text">暂无默认就诊人</view>
            </view>

            <view class="manifest" v-for="(item, index) in cardInfo" :key="index" @click="handleClick(item.card)">
                <view>
                    <view>
                        <view>{{item.nickname}} （{{item.relationship}}）</view>
                        <view class="default" v-if="item.status==1?true:false">默认</view>
                    </view>
                    <view>身份证号：{{item.code}}</view>
                    <view>就诊卡号：{{item.card}}</view>
                </view>
                <view>
                    <wd-icon name="arrow-right" size="22px"></wd-icon>
                </view>
            </view>
            
            <!-- 原生实现：暂无就诊人提示 -->
            <view class="empty-tip" v-if="cardInfo.length === 0 && defaultInfo.length === 0">
                <view class="empty-image">
                    <image src="/static/images/empty_patient.png" mode="aspectFit" />
                </view>
                <view class="empty-text">暂无就诊人</view>
            </view>

            <!-- 原生实现：二维码弹窗 -->
            <view class="modal-mask" v-if="show" @click="handleClose">
                <view class="modal-container">
                    <view class="qrcode-content">
                        <view class="qrcode-title">就诊卡二维码</view>
                        <view class="qrcode-wrapper">
                            <w-qrcode :options="{code:numCode,size:'460'}"></w-qrcode>
                        </view>
                        <view class="qrcode-footer">
                            <view class="close-btn" @click="handleClose">关闭</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { card } from '@/api/index.js';

function handleClickLeft() {
    uni.navigateBack();
}

const userInfo = ref([]);
const cardInfo = ref([]);
const defaultInfo = ref([]);
const numCode = ref('');

// 获取user_id的方法
const getUserId = async () => {
    try {
        const res = await uni.getStorage({ key: 'user' });
        return res.data?.data?.id;
    } catch (error) {
        console.error('获取用户ID失败:', error);
        uni.showToast({
            title: '获取用户信息失败，请重新登录',
            icon: 'none',
            duration: 3000
        });
        return null;
    }
};

// 获取就诊人列表
const fetchCardList = async (userId: string | null) => {
    if (!userId) return;
    
    try {
        const res = await card({ user_id: userId });
        console.log('就诊人列表:', res.data);
        
        // 清空数组
        defaultInfo.value = [];
        cardInfo.value = [];
        
        // 分类处理默认和非默认就诊人
        for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].status === 1) {
                defaultInfo.value.push(res.data[i]);
            } else {
                cardInfo.value.push(res.data[i]);
            }
        }
        
        if (res.data.length > 0) {
            userInfo.value = res.data[0];
        }
        
        return res.data;
    } catch (error) {
        console.error('获取就诊人列表失败:', error);
        return [];
    }
};

// 初始化数据
const initData = async () => {
    const userId = await getUserId();
    await fetchCardList(userId);
};

// 页面加载时初始化
onMounted(() => {
    initData();
});

const show = ref<boolean>(false);

function handleClose() {
    show.value = false;
}

function handleClick(card) {
    numCode.value = card;
    show.value = true;
}
</script>

<style scoped>
/* 原有样式保持不变 */
.overall {
    width: 100%;
    background-color: #F4F4F4;
    min-height: 100vh;
}

.title {
    width: 100%;
    height: 180rpx;
    background-color: #00DACA;
    color: white;
    display: flex;
    align-items: center;
}

.name {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 42rpx;
    margin-top: 50rpx;
    margin-left: 3%;
}

.name>view {
    margin-left: 20rpx;
}

.content {
    width: 100%;
}

.manifest {
    width: 90%;
    background-color: white;
    padding: 20rpx 5%;
    margin-top: 15rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.manifest>view:first-child>view:first-child {
    color: black;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.default {
    border: 1rpx #D8D8D8 solid;
    padding: 5rpx 10rpx;
}

.manifest>view:first-child>view {
    font-size: 30rpx;
    margin-bottom: 15rpx;
    color: #505050;
}

.images {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.images>image {
    object-fit: cover;
    width: 500rpx;
    height: 500rpx;
}

/* 新增：原生暂无内容提示样式 */
.empty-tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40rpx 0;
}

.empty-image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 15rpx;
}

.empty-image image {
    width: 100%;
    height: 100%;
}

.empty-text {
    font-size: 28rpx;
    color: #999;
}

/* 新增：原生弹窗样式 */
.modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-container {
    position: relative;
    z-index: 9999;
    width: 80%;
    max-width: 680rpx;
    background-color: #fff;
    border-radius: 24rpx;
    overflow: hidden;
}

.qrcode-content {
    padding: 40rpx 0;
}

.qrcode-title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30rpx;
}

.qrcode-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx;
}

.qrcode-footer {
    margin-top: 30rpx;
    display: flex;
    justify-content: center;
}

.close-btn {
    background-color: #00DACA;
    color: white;
    padding: 16rpx 60rpx;
    border-radius: 100rpx;
    font-size: 32rpx;
}
</style>